<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>你真的理解浏览器盒模型吗？ | totrip.xin</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="你真的理解浏览器盒模型吗？">
    <meta name="keywords" content="面试官经常会问一个问题：说一下你了解的盒模型">
    
    <link rel="preload" href="/assets/css/0.styles.b4e31d4a.css" as="style"><link rel="preload" href="/assets/js/app.c8c5e91e.js" as="script"><link rel="preload" href="/assets/js/8.426e0750.js" as="script"><link rel="preload" href="/assets/js/3.e2e147c1.js" as="script"><link rel="preload" href="/assets/js/17.220ec567.js" as="script"><link rel="prefetch" href="/assets/js/10.0ff00088.js"><link rel="prefetch" href="/assets/js/11.6b6610ac.js"><link rel="prefetch" href="/assets/js/12.a5d96d1b.js"><link rel="prefetch" href="/assets/js/13.5e335f88.js"><link rel="prefetch" href="/assets/js/14.199c4049.js"><link rel="prefetch" href="/assets/js/15.b6795a8a.js"><link rel="prefetch" href="/assets/js/16.f3df0553.js"><link rel="prefetch" href="/assets/js/4.6816cd3e.js"><link rel="prefetch" href="/assets/js/5.efc412e8.js"><link rel="prefetch" href="/assets/js/6.0ac0661b.js"><link rel="prefetch" href="/assets/js/7.fc49388d.js"><link rel="prefetch" href="/assets/js/9.638a8a7b.js"><link rel="prefetch" href="/assets/js/vuejs-paginate.c6dc7ffd.js">
    <link rel="stylesheet" href="/assets/css/0.styles.b4e31d4a.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div id="vuepress-theme-blog__global-layout"><section id="header-wrapper"><header id="header"><div class="header-wrapper"><div class="title"><a href="/" class="nav-link home-link"><img src="/Blog.png" alt="" class="img"></a></div> <div class="header-right-wrap"><ul class="nav"><li class="nav-item"><a href="/tag/" class="nav-link">标签</a></li></ul> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div></div></header></section> <div id="mobile-header"><div class="mobile-header-bar"><div class="mobile-header-title"><a href="/" class="nav-link mobile-home-link">totrip.xin </a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div> <div class="mobile-menu-wrapper"><hr class="menu-divider"> <ul class="mobile-nav"><li class="mobile-nav-item"><a href="/tag/" class="nav-link">标签</a></li> <li class="mobile-nav-item"><!----></li></ul></div></div></div> <div class="content-wrapper"><div id="vuepress-theme-blog__post-layout"><article itemscope="itemscope" itemtype="https://schema.org/BlogPosting" class="vuepress-blog-theme-content"><header><h1 itemprop="name headline" class="post-title">
        你真的理解浏览器盒模型吗？
      </h1> <div class="post-meta"><div itemprop="publisher author" itemtype="http://schema.org/Person" itemscope="itemscope" class="post-meta-author"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg> <span itemprop="name">chenggang321</span> <span itemprop="address">   in 上海</span></div> <div class="post-meta-date"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <time pubdate itemprop="datePublished" datetime="2020-10-28T00:00:00.000Z">
      2020-10-28
    </time></div> <ul itemprop="keywords" class="post-meta-tags"><li class="post-tag" data-v-42ccfcd5><a href="/tag/css" data-v-42ccfcd5><span data-v-42ccfcd5>css</span></a></li></ul></div></header> <div itemprop="articleBody" class="content__default"><p>面试官经常会问一个问题：<strong>说一下你了解的盒模型</strong>
小白：有2种盒模型，IE怪异盒模型和W3C标准盒模型，前者width包括padding和border，后者不包括。</p> <p>上面的答案几近标准，但其实还有很多点没有答出来，也就是说，一个问题可以拆分成好几个问题回答。
下面我就将&quot;说一下你了解的盒模型&quot;这个问题拆分成多小问题，去详尽的解释这个问题背后隐藏的故事。</p> <p><strong>①两种盒模型之间有何异同？</strong>
分为W3C标准盒模型和IE怪异盒模型，准确叫法应该是内容盒模型和边框盒模型，因为经过近日的一次实验，发现IE5+浏览器目前的默认盒模型也改为了content-box，无论是content-box和border-box，都是符合W3C标准的。
<img src="https://user-images.githubusercontent.com/19262750/39028684-733012a0-448a-11e8-8a2a-2b6d2c03959d.png" alt=""></p> <p>二者都由四部分组成：content，padding，border，margin...
那么IE怪异盒模型与W3C标准盒模型到底哪里有差？）
W3C标准盒模型 vs IE怪异盒模型</p> <ul><li>W3C标准盒模型下元素 css 宽度只应用于 content</li> <li>IE怪异盒模型元素 css 宽度包含 content + padding + border，主要体现在 IE 内核浏览器。
IE6 以上版本的浏览器只要正确声明 DOCTYPE 即渲染为标准盒模型，亲测，ie5确实是怪异模式（加上&lt;!DOCTYPE html&gt;依然怪异模式），参考：
Internet Explorer box model bug</li></ul> <p><strong>②如何切换盒模型模式？</strong>
使用 box-sizing: border-box 可切换为IE怪异盒模型，使用box-sizing:content-box可切换为W3C标准盒模型。</p> <p>W3C标准盒模型细节知识点：</p> <blockquote><p>①box-sizing有2种：content-box（默认），border-box
②任何element都可以有min-widh，max-width等等
③有padding时，background会扩充到padding
④margin，top和bottom会存在margin collapsing现象，最后会选择较大的一个margin，原因是box之间margin区域定义不明确</p></blockquote> <p>demo地址：https://github.com/FrankKai/Personal-Practice-2/tree/master/cssBoxModel</p> <p><strong>③如何在W3C标准盒模型和IE怪异盒模型间取舍？</strong>
建议使用border-box，因为border-box的width会将padding和border包含在内，布局时更好控制，尤其是在响应式布局中。
<img src="https://user-images.githubusercontent.com/19262750/39027008-829bd448-4482-11e8-83a3-51f813b062a5.png" alt="image"></p> <p>有一篇墙推IE怪异盒模型的文章：《把所有元素的box-sizing都设置成border-box吧！》
https://css-tricks.com/international-box-sizing-awareness-day/</p> <p>有一种推荐而且很常见的做法：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>* {
    box-sizing:border-box;
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这样做使得witdh包含padding和border，使用百分比布局时更好控制。</p> <p><strong>④文档的DOCTYPE类型对盒模型类型有影响吗？</strong>
答案是：几乎没有，只有ie5及以下才会触发怪异模式。
IE的默认盒模型是怪异盒模型吗：不是！
windows10，windows7下亲测，在未声明<code>&lt;!DOCTYPE html&gt;</code>的情况下，IE的默认盒模型也是W3C标准盒模型。
那么在声明了<code>&lt;!DOCTYPE html&gt;</code>的情况下，IE的默认盒模型是哪一个呢？
依旧是W3C标准盒模型，box-sizing值为content-box，但是不会在chrome devtools的computed中显示出来。</p> <p>DOCTYPE只是一种用来约定浏览器解析HTML文档时遵循哪种标准的方式，呈现模式分为以下三种：</p> <blockquote><p>Standards(标准)模式：遵循最新标准。
Quirks（怪癖/兼容）模式：帮助处理所有奇怪的渲染和非浏览器兼容及不符合标准的网页。
Almost Standards（近似标准）模式：针对标准的某个老版本设计的网页。</p></blockquote> <p>HTML规范的标准模式为<code>&lt;!DOCTYPE html&gt;</code>，这也是HTML5推荐的模式，在这个模式下，盒模型的默认值为content-box。</p> <p>如何查看当前文档的doctype？
无论是IE，Chrome还是FireFox，都可以直接到elements中看去html的头信息，就和C语言的.h头信息一样。
或者在IE和Chrome中，使用document.doctype查看文档模式，ff很怪异，document.doctype打印出一个对象，而且没说明到底是什么doctype。</p> <p>标准模式和怪异模式是否影响标准盒模型和怪异盒模型的实验：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code> .box{
    width:100px;
    padding:10px;
    border:10px solid black;
    height: 100px;
    background: red
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>chrome:未声明doctype，width不包含padding和border，默认是W3C标准盒模型。
<img src="https://user-images.githubusercontent.com/19262750/39026631-a6515bda-4480-11e8-99c5-301dea6925c5.png" alt="image"></p> <p>firefox:未声明doctype，width不包含padding和border，默认是W3C标准盒模型。
<img src="https://user-images.githubusercontent.com/19262750/39026649-c1417100-4480-11e8-892b-856039d3e349.png" alt="image"></p> <p>ie： 未声明doctype，width不包含padding和border，默认是W3C标准盒模型。（11，10，9，8，7， 唯独ie5，是100px（开发工具不可完全信！）， 而且发现ie8及以下的rgba()是不支持的）</p> <p>ie5下的border会挤占content的空间，而不是从content外扩展出去。
<img src="https://user-images.githubusercontent.com/19262750/39026654-c7733c48-4480-11e8-95ff-fd298825d670.png" alt="image">
demo地址：https://github.com/FrankKai/Personal-Practice-2/blob/master/cssBoxModel/cssBoxModelQuirks.html</p> <p>参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing</p></div> <footer><!----> <hr> <!----></footer></article> <!----></div></div> <footer class="footer" data-v-fdbf4940><div class="footer-left-wrap" data-v-fdbf4940><ul class="contact" data-v-fdbf4940><li class="contact-item" data-v-fdbf4940><a href="https://gitee.com/chenggang321/chenggang321.git" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github" data-v-fdbf4940><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" data-v-fdbf4940></path></svg>
          
        </a></li></ul></div> <div class="footer-right-wrap" data-v-fdbf4940><ul class="copyright" data-v-fdbf4940><li class="copyright-item" data-v-fdbf4940><a href="http://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940>皖ICP备17006327号-1</a></li><li class="copyright-item" data-v-fdbf4940><a href="https://gitee.com/chenggang321/chenggang321.git" target="_blank" rel="noopener noreferrer" class="nav-link external" data-v-fdbf4940>MIT Licensed | Copyright © 2020-present totrip.xin</a></li></ul></div></footer></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.c8c5e91e.js" defer></script><script src="/assets/js/8.426e0750.js" defer></script><script src="/assets/js/3.e2e147c1.js" defer></script><script src="/assets/js/17.220ec567.js" defer></script>
  </body>
</html>
